<template>
  <!-- 红黄牌公示列表 -->
  <base-breadcrumb>
    <searchData :searchData="searchOptions" @search="handleSearch" />
    <div class="page-body">
      <a-card :bordered="false">
        <!-- <title-name title="红黄牌公示" /> -->
        <div class="table-operateors mb20">
          <a-button type="primary" icon="plus" @click="handleUpdate('add')" v-btnPermission="'hse_007_add_01'">新增上报
          </a-button>
        </div>
        <a-alert class="mb12" type="info" show-icon>
          <template slot="message">
            <span>红黄牌数：<a>{{ countFrom ? countFrom.total : 0 }}</a>张，
              黄牌(公司级)：<a>{{ countFrom ? countFrom.yellowCTotal : 0 }}</a>张，
              黄牌(局级)：<a>{{ countFrom ? countFrom.yellowJTotal : 0 }}</a>张，
              红牌(公司级)：<a>{{ countFrom ? countFrom.redCTotal : 0 }}</a>张，
              红牌(局级)：<a>{{ countFrom ? countFrom.redJTotal : 0 }}</a>张
            </span>
          </template>
        </a-alert>
        <list-table
          ref="table"
          size="default"
          rowKey="id"
          :columns="columns"
          :request="loadData"
          :alert="true"
          show-size-changer
          show-quick-jumper
          showPagination="auto"
        >
          <span slot="sort" slot-scope="text, record, index">{{ index + 1 }}</span>
          <span slot="publicity" slot-scope="text, record">{{ record.publicity.name }}</span>
          <template slot="operator" slot-scope="text, record">
            <MoreButton>
              <a class="base-btn" @click="handleUpdate('look', record)" v-btnPermission="'hse_007_loo_04'">查看</a>
              <a class="base-btn" @click="handleUpdate('edit', record)" v-btnPermission="'hse_007_edi_02'" v-if="hideBuquBtn()">编辑</a>
              <a class="base-btn" @click="handleUpdate('DELETE', record)" v-btnPermission="'hse_007_del_03'" v-if="hideBuquBtn()">删除</a>
              <a class="base-btn" @click="handleUpdate('question', record)" v-btnPermission="'hse_007_ytj_05'" v-if="hideBuquBtn()">约谈记录</a>
            </MoreButton>
          </template>
        </list-table>
      </a-card>
    </div>
  </base-breadcrumb>
</template>

<script>
import { deleteCardNotice, getCardNoticeList, GetCount } from '@/api/safetySupervision/cardNotice.js'
import { STable } from '@/components'
import ThemeChoose from '@/components/themeChoose/themeChoose.vue'
import SelectSubCompany from '@/components/Select/SelectSubCompany' // 分公司
import SelectProject from '@/components/Select/SelectProject' // 项目
import OrgTreeSelect from '@/components/OrgTreeSelect'
import { getSelectListByType } from '@/api/safetySupervision/common.js'
import { status } from '@/components/constant'

const searchOptions = [
  {
    name: '所属单位',
    valueKey: 'searchQuery',
    type: OrgTreeSelect,
  },
  // {
  //   name: '所属分公司',
  //   valueKey: 'branchComId',
  //   type: SelectSubCompany,
  //   getAll:true
  // },
  // {
  //   name: '所属项目',
  //   keyValue: 'branchComId',
  //   valueKey: 'projectId',
  //   type: SelectProject,
  //   isSelf:false
  // },
  {
    name: '责任人',
    value: 'respEmployeeId',
    type: 'input'
  },
  {
    name: '发牌日期',
    value: 'dealDate',
    type: 'dateRange',
    attr: {
      rangeFormat: ['beginDate', 'endDate']
    }
  },
  {
    name: '状态',
    value: 'publicityId',
    type: 'select',
    data: []
  }
]

const columns = [
  {
    title: '序号',
    dataIndex: 'sort',
    scopedSlots: { customRender: 'sort' },
    width: 70 
  },
  {
    title: '分公司',
    dataIndex: 'branchComName',
    width: 150 
  },
  {
    title: '项目',
    dataIndex: 'projectName',
    width: 250 
  },
  {
    title: '级别',
    dataIndex: 'cardLevel.name',
    width: 150 
  },
  {
    title: '发牌日期',
    dataIndex: 'dealDate',
    width: 100 
  },
  {
    title: '责任人',
    dataIndex: 'respNamePost',
    width: 150 
  },
  {
    title: '约谈情况',
    dataIndex: 'isTalk',
    width: 100
  },
  {
    title: '状态',
    dataIndex: 'publicity.name',
    width: 100,
    scopedSlots: { customRender: 'publicity' }
  },
  {
    title: '撤销时间',
    dataIndex: 'cancelTime',
    width: 100 
  },
  {
    title: ' 操作',
    dataIndex: 'operator',
    width: 250,
    scopedSlots: { customRender: 'operator' }
  }
]
export default {
  name: 'a' + Date.now(), components: {
    ThemeChoose,
    STable
  },
  data() {
    return {
      noticeStatusList: [], // 公示状态
      searchOptions: searchOptions,
      formConfig: {},
      state: {
        isExpand: false
      },
      columns: columns,
      queryParam: {},
      countFrom: {},
      loadData: async (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        const [err, res] = await getCardNoticeList(requestParameters)
        return new Promise((resolve, reject) => {
          if (err) {
            reject(err)
          } else {
            resolve(res)
          }
        })
      }
    }
  },
  created() {
    this.getStatusList()
  },
  methods: {
    async getStatusList() {
      const [err, res] = await getSelectListByType({
        type: 9
      })
      if (!err) {
        const statusList = res.data || []
        this.searchOptions.forEach((item) => {
          if (item.value === 'publicityId') {
            item.data = statusList.map((statuItem) => {
              return {
                label: statuItem.name,
                value: statuItem.id
              }
            })
          }
        })
      }
    },
    handleSearch(val = {}) {
      val && (this.queryParam = val)
      this.$refs.table.refresh(true)
      this.handleCount(this.queryParam)
    },
    deleteRecord(data = {}) {
      this.$confirm({
        title: '提示',
        content: '确认删除该记录？',
        okText: '确定',
        cancelText: '取消',
        type: 'warning',
        onOk: async () => {
          const params = {
            id: data.id
          }
          const [err, res] = await deleteCardNotice(params)
          if (!err) {
            this.$message.success('删除成功')
            this.$refs.table.refresh() // 刷新
          }
        }
      })
    },
    // 处理更新操作（新增、编辑）
    handleUpdate(type, data = {}) {
      if (type === 'DELETE') {
        this.deleteRecord(data)
        return
      }
      const name = type === 'look' ? 'LookCardNotice' : type === 'edit' ? 'UpdateCardNotice' : 'AddCardNotice'
      this.$router.push({
        name: name,
        query: {
          pageType: type,
          id: data.id || ''
        }
      })
    },
    //获取统计
    async handleCount(queryParam) {
      const [err, res] = await GetCount(queryParam)
      if (!err) {
        this.countFrom = res.data
      }
    }
  },
  mounted() {
    this.handleCount(this.queryParam)
  }

}
</script>

<style lang="less" scoped>
.page-header {
  .header-row {
    display: flex;

    .flex-content {
      flex: auto;
    }

    .divider {
      margin: 0 12px;
    }

    .expand-btn {
      margin-left: 8px;
      font-size: 14px;
    }
  }
}

.page-body {
  .table-operateors {
    .ant-btn + .ant-btn {
      margin-left: 12px;
    }
  }
}
</style>